<template>
  <div class="questionmain">
    <div class="container">
      <!-- 左 -->
      <div class="left-board">
        <div class="left-header">
          <span class="title-txt">题型</span>
        </div>
        <div class="left-box">
          <el-scrollbar class="left-scrollbar">
            <div>
              <el-button
                v-for="item in tiList"
                :icon="item.icon"
                :key="item.type"
                @click="addTi(item)"
                style="width: 90%; margin-top: 25px; margin-left: 0"
                >{{ item.name }}</el-button
              >
            </div>
          </el-scrollbar>
        </div>
      </div>

      <!-- 中 -->
      <div class="center-board">
        <div class="center-header">
          <span class="title-txt">题目内容</span>
        </div>

        <div class="center-box">
          <template v-if="questionList && questionList.length != 0">
            <div
              v-for="(item, idx) in questionList"
              :key="idx"
              @click="changeChoose(idx)"
              class="coBOX"
              style="margin-top: 20px; cursor: pointer"
            >
              <component
                :item.sync="questionList[idx]"
                :idx="idx"
                :is="item.questionType"
                :act="chooseTi == idx"
                @remove="remove"
                @change="questionChange"
              />
            </div>
          </template>
          <template v-else>
            <el-empty description="点击左侧题目类型，创建试题"></el-empty>
          </template>
        </div>
      </div>

      <!-- 右 -->
      <div class="right-board" v-if="chooseItem">
        <div class="right-header">
          <span class="title-txt">题目设置</span>
        </div>
        <div class="right-box">
          <el-scrollbar class="right-scrollbar">
            <div>
              <el-form label-position="top" label-width="80px">
                <el-form-item label="标签" prop="labels">
                  <el-select
                    v-model="chooseItem.labels"
                    placeholder="请选择标签"
                    :style="{ width: '100%' }"
                    multiple
                  >
                    <el-option
                      v-for="(item, index) in labelOptions"
                      :key="index"
                      :label="item.fullName"
                      :value="item.enCode"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="试题等级" prop="difficultyGradeId">
                  <el-select
                    v-model="chooseItem.difficultyGradeId"
                    placeholder="请选择"
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in difficultyGradeOptions"
                      :key="index"
                      :label="item.fullName"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="答案解析" prop="analysis">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="chooseItem.analysis"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSelector } from "@/views/exam/api/difficultyGrade";
import draggable from "vuedraggable";
import selectTi from "./components/select.vue";
import answers from "./components/answers";
import blank from "./components/blank";
import cases from "./components/case";
import multiple from "./components/multiple";
import determine from "./components/determine";

export default {
  components: {
    draggable,
    selectTi,
    answers,
    blank,
    cases,
    multiple,
    determine,
  },
  props: {},
  data() {
    return {
      tiList: [
        {
          name: "单选题",
          type: "selectTi",
          icon: "icon-ym icon-ym-generator-radio",
          options: [
            {
              id: 1,
              title: "选项1",
              filetype: "img",
              filepath: "",
              isanswer: true,
              myanswer: false,
            },
            {
              id: 2,
              title: "选项2",
              filetype: "img",
              filepath: "",
              isanswer: false,
              myanswer: false,
            },
          ],
        },
        {
          name: "多选题",
          type: "multiple",
          icon: "icon-ym icon-ym-generator-checkbox",
          options: [
            {
              id: 1,
              title: "选项1",
              filetype: "img",
              filepath: "",
              isanswer: true,
              myanswer: false,
            },
            {
              id: 2,
              title: "选项2",
              filetype: "img",
              filepath: "",
              isanswer: false,
              myanswer: false,
            },
          ],
        },
        {
          name: "判断题",
          type: "determine",
          icon: "icon-ym icon-ym-generator-switch",
          options: [
            {
              id: 1,
              title: "对",
              filetype: "img",
              filepath: "",
              isanswer: true,
              myanswer: false,
            },
            {
              id: 2,
              title: "错",
              filetype: "img",
              filepath: "",
              isanswer: false,
              myanswer: false,
            },
          ],
        },
        {
          name: "填空题",
          type: "blank",
          icon: "icon-ym icon-ym-generator-input",
          options: [],
          opimgs: [],
        },
        {
          name: "问答题",
          type: "answers",
          icon: "icon-ym icon-ym-generator-menu",
          options: [],
          opimgs: [],
        },
        // {
        //   name: "案例题",
        //   type: "cases",
        //   icon: "icon-ym icon-ym-generator-popup",
        // },
      ],

      newTi: {
        folderId: "",
        questionType: "",
        parentId: "",
        title: "",
        titimgs: [],
        options: [],
        opimgs: [],
        answers: [],
        labels: [],
        difficultyGradeId: "",
        analysis: "",
        analysisimgs: [],
        optionRandom: 0,
        description: "",
        list: [],
      },

      questionList: [],

      chooseTi: 0,
      chooseItem: {},
      difficultyGradeOptions: [],

      firstDifficultyGradeId: "",

      labelOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getDifficultyGradeOptions();
    this.getLabelsOptions();
  },
  mounted() {
    // 取一下默认
    if (this.questionList.length != 0) {
      this.chooseTi = this.questionList[0].id;
      this.chooseItem = this.questionList[0];
    }
  },
  methods: {
    changeChoose(idx) {
      this.chooseTi = idx;
      //选择对应题目配置
      this.chooseItem = this.questionList[idx];
    },
    //删除题目
    remove(idx) {
      // var idx = this.questionList.findIndex((el) => {
      //   return el.id == id;
      // });
      this.questionList.splice(idx, 1);
    },
    questionChange(idx, item) {
      console.log("questionChange", idx, item);
      this.questionList[idx] = item;
    },
    //增加题目
    addTi(item) {
      // 初始化
      var _type = JSON.parse(JSON.stringify(item));
      var _newTi = JSON.parse(JSON.stringify(this.newTi));
      this.$set(_newTi, "questionType", _type.type);
      this.$set(_newTi, "questionTypeName", _type.name);
      this.$set(_newTi, "options", _type.options);
      this.$set(_newTi, "opimgs", _type.opimgs);

      this.$set(_newTi, "difficultyGradeId", this.firstDifficultyGradeId);
      console.log("addTi _newTi", _newTi);
      this.questionList.push(_newTi);

      var _i = this.questionList.length - 1;
      this.chooseTi = _i;
      this.chooseItem = this.questionList[_i];
    },
    /**
     * 获取试题等级 下拉选择项
     */
    getDifficultyGradeOptions() {
      getSelector()
        .then((res) => {
          this.difficultyGradeOptions = res.data;
          // 设置默认选择第一个
          if (this.difficultyGradeOptions[0]) {
            this.firstDifficultyGradeId = this.difficultyGradeOptions[0].id;
            // console.log(this.dataForm.difficultyGradeId);
          }
        })
        .catch(() => {
          this.difficultyGradeOptions = [];
        });
    },
    // 获取 标签 选项
    getLabelsOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "questionLabels",
        })
        .then((res) => {
          this.labelOptions = res;
        });
    },
  },
};
</script>
<style>
.el-loading-mask {
  display: none !important;
}
</style>
<style lang="scss" scoped>
@import "../styles/index";

.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}

.item:hover {
  background-color: #f1f1f1;
  cursor: move;
}

.chosen {
  border: solid 2px #3089dc !important;
}

.center-board {
  .itemTi {
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    margin-bottom: 16px;
  }
}
</style>
